<template>
  <g class="river" :transform="props.transform">
    <!-- 背景矩形 -->
    <rect width="8" height="8" fill="#4242FF" />

    <!-- 动画总周期为5s -->
    
    <!-- 第一组rect - 显示1.9s，0.1s消失 -->
    <g>
      <Pixel
        v-for="([x, y], i) in dots[0]"
        :key="'a' + i"
        :x="x"
        :y="y"
        fill="#B5EFEF"
      >
        <animate
          attributeName="opacity"
          dur="5s"
          values="1;1;0;0"
          keyTimes="0;0.38;0.43;1"
          repeatCount="indefinite"
        />
      </Pixel>
    </g>
    
    <!-- 第二组rect - 在第一组结束时显示，显示2.9s，最后0.1s消失 -->
    <g>
      <Pixel
        v-for="([x, y], i) in dots[1]"
        :key="'b' + i"
        :x="x"
        :y="y"
        fill="#B5EFEF"
      >
        <animate
          attributeName="opacity"
          dur="5s"
          values="0;0;1;1;0"
          keyTimes="0;0.4;0.4;0.98;1"
          repeatCount="indefinite"
        />
      </Pixel>
    </g>
    
    <!-- 第三组rect - 与第二组部分重叠，显示0.9s，最后0.1s消失 -->
    <g>
      <Pixel
        v-for="([x, y], i) in dots[2]"
        :key="'c' + i"
        :x="x"
        :y="y"
        fill="#f9c45f"
      >
        <animate
          attributeName="opacity"
          dur="5s"
          values="0;0;1;1;0"
          keyTimes="0;0.8;0.8;0.98;1"
          repeatCount="indefinite"
        />
      </Pixel>
    </g>
  </g>
</template>

<script setup>
  import Pixel from './Pixel.vue'

  const props = defineProps(['transform'])

  const dots = [
    [[7, 0], [1, 1], [2, 2], [3, 3], [6, 3], [7, 4], [3, 5], [2, 6], [4, 6], [0, 7]],
    [[5, 0], [0, 2], [1, 3], [4, 3], [3, 4], [5, 4], [1, 6], [2, 7], [6, 7]],
    [[7, 0], [1, 1], [2, 2], [5, 2], [3, 6], [4, 7], [4, 4]]
  ]
</script>

<style lang="scss" scoped>

</style>